<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <!-- 其他头部内容保持不变 -->
    <style>
        /* 在原有样式基础上添加以下修改 */

        .task-item {
            align-items: flex-start; /* 改为顶部对齐 */
            min-height: 60px; /* 保证最小高度 */
            padding: 15px 18px;
        }

        .task-text {
            /* 新增文本处理 */
            word-wrap: break-word;
            overflow-wrap: break-word;
            white-space: normal;
            max-width: calc(100% - 80px); /* 保证删除按钮可见 */
            line-height: 1.4;
            padding-right: 10px;
        }

        .task-checkbox {
            margin-top: 3px; /* 复选框垂直对齐调整 */
        }

        /* 移动端优化 */
        @media (max-width: 600px) {
            .task-text {
                font-size: 14px;
            }
            .task-item {
                min-height: 50px;
                padding: 12px 15px;
            }
        }
    </style>
</head>
<body>
    <!-- 主体内容保持不变 -->

    <script>
        // 在创建任务元素时添加文本截断保护
        function createTaskElement(text) {
            const taskItem = document.createElement('div');
            taskItem.className = 'task-item';
            // 使用textContent替代innerHTML防止XSS
            taskItem.innerHTML = `
                <input type="checkbox" class="task-checkbox">
                <span class="task-text">${text.replace(/</g, '&lt;').replace(/>/g, '&gt;')}</span>
                <button class="delete-btn">×</button>
            `;
            return taskItem;
        }
    </script>
</body>
</html>